<template>
  <router-link
    :to="{
      name: 'SupplyDetail',
      query: { id: props.data.resourceDemandId, type: 'demand' },
    }"
    class="app-card relative box-border bg-#fff mr-16px w-432px mb-16px"
  >
    <div class="flex items-center justify-between">
      <h3 class="link font-size-18px fw-500 lh-26px">
        {{ resourceDemand.demandTitle }}
      </h3>
      <span
        :style="{
          color:
            SOURCE_TYPE_TAG_COLOR_ENUM[props.data.resourceDemand?.demandType],
        }"
        >{{ SOURCE_TYPE_ENUM[props.data.resourceDemand?.demandType] }}</span
      >
    </div>
    <div class="font-size-14px">
      <div class="lh-20px mt-12px text-light">
        {{ props.data.createTime?.slice(0, 16) }}
      </div>
      <div class="h-1px mt-22px mb-16px bg-#d8d8d8"></div>
      <div class="text-row">
        <span>公司：</span>
        <div>{{ supplyUser.companyName }}</div>
      </div>
      <div class="text-row">
        <span>联系人：</span>
        <div>{{ supplyUser.nickName }}</div>
      </div>

      <div class="text-row">
        <span>联系方式：</span>
        <div>{{ supplyUser.phonenumber }}</div>
      </div>
      <div class="text-row">
        <span>邮箱：</span>
        <div>{{ supplyUser.email }}</div>
      </div>
    </div>
  </router-link>
</template>

<script setup>
import { SOURCE_TYPE_ENUM, SOURCE_TYPE_TAG_COLOR_ENUM } from "@/const";

const props = defineProps({
  data: {
    type: Object,
    default: () => ({}),
  },
});
const resourceDemand = computed(() => props.data.resourceDemand);
const supplyUser = computed(() => props.data.supplyUser);
</script>

<style scoped lang="less">
.app-card {
  border: 1px solid #d9dbe1;
  padding: 21px 28px 18px 24px;
  overflow: hidden;
  &::after {
    content: "";
    position: absolute;
    background: url("/svg/folder.svg") no-repeat center;
    width: 71px;
    height: 44px;
    bottom: -4px;
    left: 0;
  }
  &:nth-child(3n) {
    margin-right: 0;
  }
}
.text-row {
  color: @text-light;
  display: flex;
  align-items: flex-start;
  line-height: 20px;
  margin-bottom: 16px;
  > div {
    flex: 1;
    .single-overflow;
  }
}
</style>
